import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Controls.Styles 1.2

Rectangle{
    id: root
    width: 4*height; height: 100
    color: backcolor
    border.width: 2
    radius:  5

    property int volumne: 6
    property int number : 20
    property color normalcolor: "grey"
    property color highlightcolor: "gold"
    property color backcolor: "grey"
    signal minBtnClicked;
    signal plusBtnClicked;

    Button{
        id: minBtn
        anchors.left: parent.left
        anchors.verticalCenter: parent.verticalCenter
        anchors.margins: root.height/5
        width: root.height/5*3; height: width
        style: btnStyle
        Text {
            id: minText
            text: qsTr("-")
            anchors.centerIn: parent
            font { bold: true; pixelSize: root.height/5*2}
        }
        onClicked: {
            plusBtn.enabled = true
            if (--volumne <= 0) {
                volumne = 0;
                minBtn.enabled = false;
             }
         }
    }
    Button{
        id: plusBtn
        anchors.right: parent.right
        anchors.verticalCenter: parent.verticalCenter
        anchors.margins: root.height/5
        width: root.height/5*3; height: width
        style: btnStyle
        Text {
            id: plusText
            text: qsTr("+")
            anchors.centerIn: parent
            font { bold: true; pixelSize: root.height/5*2}
        }
        onClicked: {
            minBtn.enabled = true;
            if (++volumne >= number) {
                volumne = number;
                plusBtn.enabled = false;
            }
        }
    }

    Rectangle{
        height: root.height/2
        width:  root.width/2
        anchors.centerIn: parent
        color: parent.color
        Row{
            anchors.fill: parent
            spacing: (parent.width/number)*0.4
            Repeater{
                model: number
                Rectangle{
                    //anchors.verticalCenter: parent.verticalCenter
                    anchors.bottom: parent.bottom
                    width: (parent.width/number)*0.6; height: parent.height*index/number
                    radius: width/2
                    color: index < volumne ? highlightcolor : normalcolor
                    border { width: 1; color: "white"}
                }
            }
        }
    }

    Component{
        id: btnStyle
        ButtonStyle{
            background: Rectangle{
                color: "grey"
                border.width: control.hovered ? 3 : 2
                border.color: "black"
                radius: 5
            }
        }
    }
}
